<template>
  <el-form ref="ruleFormRef" label-position="top" style="width: 100%" :model="form" status-icon :rules="rules" label-width="auto">
    <el-form-item label="灾情" prop="disasterSituation">
      <Editor v-model="form.disasterSituation" ref="editorRef1" height="200px" />
    </el-form-item>
    <el-form-item label="处置行动" prop="action" style="margin: 20px 0;">
      <Editor v-model="form.action" ref="editorRef2" height="200px" />
    </el-form-item>
    <el-form-item label="快速评估" prop="rapidAssess">
      <Editor v-model="form.rapidAssess" ref="editorRef3" height="200px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)" style="margin: 0 auto">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import request from '@/config/axios'
import { Editor } from '@/components/Editor'
import {saveEmergencyServeInfo} from "@/api/earthquake/earthquakeServer";
const message = useMessage() // 消息弹窗
const props: any = defineProps({
  earthQuakeId: {
    type: String,
    default: '',
  },
  earthQuakeType: {
    type: String,
    default: '2',
  },
});
const ruleFormRef = ref<any>()
const form = ref<any>({
  disasterSituation: '',
  action: '',
  rapidAssess: '',
})
const rules = reactive<any>({
  disasterSituation: [{  required: true, message: '灾情不能为空', trigger: ['blur','change'] }],
  action: [{  required: true,message: '处置行动不能为空', trigger:  ['blur','change'] }],
  rapidAssess: [{  required: true,message: '快速评估不能为空', trigger:  ['blur','change'] }],
})
const getInfo = () => {
  request.get({ url: '/emergencyServeInfo/info', params: { earthQuakeId: props.earthQuakeId, earthQuakeType: props.earthQuakeType } }).then(res => {
    form.value = {...res,...props,};
    form.value.disasterSituation = res.disasterSituation?res.disasterSituation:'';
    form.value.action = res.action?res.action:'';
    form.value.rapidAssess = res.rapidAssess?res.rapidAssess:'';
  }).catch(error => {

  })
}
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      saveEmergencyServeInfo(form.value).then(res=>{
        message.success('保存成功');
        getInfo()
      })
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
onMounted(() => {
  getInfo()
})
</script>